<template>
	<view class="box">
		<view class="messbody">
			<view v-for="(item, index) in list" :key="index" class="mess " :class="{ right: user.userid == item.userid }">
				<image v-if="user.userid == item.userid" class="photo" :src="user.photo"></image>
				<image v-else class="photo" :src="toUser.photo"></image>
				<view class="content">
					<view v-if="item.type == 'voice'">
						<span><image mode="widthFix" @click="play(item.content)" style="width: 200rpx;" class="voice" src="../../static/image/yuyin.png"></image></span>
					</view>

					<span class="cont" v-if="item.type == 'txt'">{{ item.content }}</span>
					<image mode="widthFix" v-if="item.type == 'img'" class="img" :src="item.content"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view @click="yuyins" class="audio iconfont" :class="[yuyin ? ' icon-yuyin' : 'icon-jianpan']"></view>
			<input v-show="yuyin" v-model="content" type="text" value="" />
			<button class="say" type="default" v-show="!yuyin" @touchstart="touchstart" @touchend="touchend">发送语音</button>
			<button @click="sendMessage" class="rightBtn" v-if="content != ''" type="default">发送</button>
			<view v-else>
				<text @click="uploadImg" class="iconfont icon-xiaolian  rightBtn" type="default"></text>
				<text class="rightBtn iconfont icon-jia" v-show="!isSendBtn" type="default"></text>
			</view>
		</view>
	</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
import { IMGBASEURLS } from '../../utils/config.js';
import { upload, chooseImage } from '../../utils/upload.js';
export default {
	data() {
		return {
			yuyin: true,
			list: [],
			content: '',
			isSendBtn: false,
			user: { userid: '', photo: '' },
			toUser: { toUserid: '', photo: '' },
			time: 0
		};
	},
	onLoad(item) {
		this.toUser.toUserid = item.userid;
		this.toUser.photo = IMGBASEURLS + item.photo;
		this.getuser();
		let self = this;
		recorderManager.onStop(function(res) {
			console.log('recorder stop' + JSON.stringify(res));
			let voicePath = res.tempFilePath;
			upload(voicePath).then(response => {
				if (response.errCode == 10000) {
					console.log(88888, IMGBASEURLS + response.data);
					self.sendVoiceMessage(IMGBASEURLS + response.data);
					// console.log(11, IMGBASEURLS+response.data)
					clearTimeout(this.timer);
					console.log(this.time);
				}
			});
		});
	},
	created() {
		this.connectSocket();
	},
	methods: {
		yuyins() {
			this.yuyin = !this.yuyin;
		},
		play(url) {
			innerAudioContext.src = url;
			innerAudioContext.play();
		},
		timer() {
			this.time++;
		},
		touchstart() {
			console.log('开始录音');
			setTimeout(this.timer, 1000);
			console.log(this.time);
			recorderManager.start();
		},
		touchend() {
			console.log('录音结束');

			recorderManager.stop();
		},
		//发送图片
		async uploadImg() {
			let that = this;
			const res = await chooseImage(1); //每次发送几条图片
			console.log(1111, res);
			res.forEach(item => {
				//调用upload接口带值传输
				upload(item).then(response => {
					console.log(11222, response.errCode);
					if (response.errCode == 10000) {
						//成功后发给一个变量在向服务器传值
						that.sendImgMessage(IMGBASEURLS + response.data); //拼接图片公用路径
					}
				});
			});
		},
		sendImgMessage(url) {
			let mage = { userid: this.user.userid, toUserid: this.toUser.toUserid, content: url, type: 'img' };
			uni.sendSocketMessage({ data: JSON.stringify(mage) });
		},
		sendVoiceMessage(url) {
			console.log(12121112, url);
			let msg = { userid: this.user.userid, toUserid: this.toUser.userid, content: url, type: 'voice' };
			console.log(1123, JSON.stringify(msg));
			uni.sendSocketMessage({ data: JSON.stringify(msg) });
		},
		//点击发送
		sendMessage() {
			// { userid:this.user.userid, toUserid:this.toUser.userid, content:url, type: "img" }
			let mags = { userid: this.user.userid, toUserid: this.toUser.toUserid, content: this.content, type: 'txt' };
			//向服务器传送信息
			uni.sendSocketMessage({ data: JSON.stringify(mags) });
			this.content = '';
		},
		login() {
			let msg = { userid: this.user.userid, type: 'login' };
			//向服务器发送信息
			uni.sendSocketMessage({
				data: JSON.stringify(msg)
			});
		},
		getuser() {
			this.user.userid = uni.getStorageSync('userid');
			this.user.photo = uni.getStorageSync('userinfo').photo;
			console.log(this.user, this.toUser);
		},
		//跳转到 详情页
		particulars() {
			uni.navigateTo({
				url: './particulars'
			});
		},
		connectSocket() {
			let that = this;
			uni.connectSocket({
				url: 'ws://39.99.240.103:5000'
			});
			//接收服务器发送的信息
			uni.onSocketMessage(function(res) {
				if (res.data && JSON.parse(res.data).content) {
					//服务器接收到信息之后返回在赋值给this.list变量
					that.list.push(JSON.parse(res.data));
				}
				console.log('收到服务器内容：' + res.data);
			});
			//链接服务器
			uni.onSocketOpen(function(res) {
				console.log('连接成功');
				that.login();
			});
		}
	},
	// 标题栏跳转页面
	onNavigationBarButtonTap(e) {
		console.log('success');
		// console.log(e.index)
		if (e.index == 0) {
			uni.navigateTo({
				url: './particulars'
			});
		}
	}
};
</script>

<style lang="less">
@import './../../static/style/page.less';
@import '../..//static/icon/iconfont.less';
</style>
